<template>
	<view class="gui-flex1 gui-flex gui-column content">
		<view style="height: 60rpx;"></view>
		<view style="padding:20rpx 30rpx; color: white;">
			<gui-switch-navigation :items="tabs" textAlign="center" :size="0" :margin="60" :currentIndex="currentIndex"
				activeDirection="center" :titleWordClass="nav_color" @change="navchange"></gui-switch-navigation>
		</view>
		<view class="piece">
			<view v-if="artciles.length >= 1" class="news-list gui-flex gui-row gui-space-between gui-nowrap gui-border-b gui-margin-x"
				v-for="(item, idx) in artciles" :key="idx" @click="gotoDetail(item)">
				<view class="news-title">
					<gui-skeleton customStyle="border-radius:8rpx;" style=" margin-right: 20rpx;">
						<text class="gui-text gui-primary-text">{{item.title}}</text>
					</gui-skeleton>
					<view class="gui-flex gui-space-between gui-color-gray" style="font-size: 20rpx;margin-top: 40rpx;">
						<text class="gui-block gui-margin-x"><!-- {{item.compName}} -->柳钢集团</text>
						<!-- <text class="gui-block gui-margin-x">{{item.crt_time}}</text> -->
						<text class="gui-block gui-margin-x">{{item.look_num}}次浏览</text>
					</view>
				</view>
				<view class="news-img" style="margin: 15rpx 0;">
					<gui-skeleton customStyle="width:210rpx; height:120rpx;">
						<gui-image borderRadius="10rpx" :src="$uimg+item.fid" :width="200"></gui-image>
					</gui-skeleton>
				</view>
			</view>
			<view style="color: white; text-align: center; margin-top: 150rpx;">{{reminder}}</view>
		</view>
	</view>
</template>

<script>
	import graceJS from "@/Grace6/js/grace.js"
	import artciles from '@/Grace6/demoData/article.js';

	export default {
		name: 'NewsComponent',
		props: {
			// 用于接收外部触发的加载更多事件
			loadMore: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				navNum: 0,
				page: 1,
				pageSize: 10,
				cid: 0,
				// 新闻列表数据
				artciles: [],
				// 选项卡标签
				tabs: [],
				// 选中选项的 索引
				currentIndex: 0,
				cid: 0,
				firstTabId: 0,
				total: 0,
				reminder: null,
				nav_color: ['gui-color-white'],
			}
		},
		watch: {
			loadMore(newVal) {
				if (newVal) {
					this.loadMoreData();
					// 通知父组件加载完成
					this.$emit('loadComplete');
				}
			}
		},
		mounted() {
			this.getNav()
		},
		methods: {
			getNav() {
				let self = this;
				this.$boya.NGet("/lgzhsys/newsCategory", {}, (res) => {
					// console.log(res)
					self.tabs = res.data
					self.cid = res.data[0].id
					self.getnewsIngo()
					console.log("data", res.data)
				})
			},
			navchange: function(index) {
				let self = this;
				this.page = 1
				this.currentIndex = index;
				console.log('currentIndex: ', this.currentIndex)
				self.cid = self.tabs[index].id
				self.artciles = []
				this.getnewsIngo()
			},
			getnewsIngo() {
				let self = this;
				let data = {
					page_index: self.page,
					page_size: self.pageSize,
					category_id: self.cid
				}
				this.$boya.NGet("/lgzhsys/news", data, (res) => {
					self.total = res.data.total
					self.artciles = [...self.artciles, ...res.data.data]
					if(self.artciles.length < 1) {
						self.reminder = '暂无数据'
					}
				})
			},
			gotoDetail(d) {
				uni.navigateTo({
					url: "/pages/news/newsDetail?id=" + d.id
				})
			},
			loadMoreData() {
				let self = this
				if (self.page * self.pageSize >= self.total) {
					uni.showToast({
						title: "没有更多数据了",
						icon: "none",
						duration: 1000
					});
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				} else {
					if (self.page <= self.page - 1) {
						setTimeout(() => {
							uni.hideLoading()
						}, 500)
					} else {
						uni.showLoading({
							title: ""
						});
						self.page++
						this.getnewsIngo()
					}
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				}
			},
		}
	}
</script>

<style scoped>
	.content {
		width: 100vw;
		min-height: 100vh;
		background: url('../../static/homePage/xinBj.png') 100% 100% / 100% 100%;
	}
	
	.demo-nav {
		padding: 15rpx 30rpx;
	}

	.demo-text {
		line-height: 200rpx;
		padding-bottom: 3000px;
	}
	
	.piece {
		width: 98%;
		margin: 0 auto;
		height: 85vh;
		max-height: 85vh;
		overflow-y: auto;
	}

	.news-list {
		margin-bottom: 30rpx;
		padding: 20rpx;
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 6rpx 6rpx 10rpx #c1c1c1;
	}

	.news-img {
		width: 200rpx;
		margin: 0 30rpx;
		overflow: hidden;
	}

	.news-title {
		flex: 1;
		margin-top: 10rpx;
	}
</style>